<template>
	<view class="zone u-flex" v-if="list.length > 0">
		<view class="zone-left u-flex-col u-col-center u-flex-end"
			:style="{backgroundImage:`url(${list[0].cover_image})`}"
			@click="$emit('detail',`/subPackages/medical-cosmetology-zone/detail?zone_id=${list[0].id}&name=${list[0].name}`)">
			<view class="zone-button">{{list[0].name}}</view>
			<view class="zone-text">保湿维稳修屏障</view>
		</view>
		<view class="zone-right u-flex-col">
			<view class="zone-img u-flex-col u-col-start" :style="{backgroundImage:`url(${list[1].cover_image})`}"
				@click="$emit('detail',`/subPackages/medical-cosmetology-zone/detail?zone_id=${list[1].id}&name=${list[1].name}`)">
				<view class="zone-button">{{list[1].name}}</view>
				<view class="zone-text">一招解决敏感泛红</view>
			</view>
			<view class="zone-img u-flex-col u-col-start" :style="{backgroundImage:`url(${list[2].cover_image})`}"
				@click="$emit('detail',`/subPackages/medical-cosmetology-zone/detail?zone_id=${list[2].id}&name=${list[2].name}`)">
				<view class="zone-button">{{list[2].name}}</view>
				<view class="zone-text">皮肤水润一整天</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			list: {
				type: Array,
				default: (() => {
					return [];
				})
			}
		},
		methods: {}
	}
</script>

<style lang="scss">
	.zone {
		padding-top: 20rpx;

		.zone-left {
			width: 340rpx;
			height: 400rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.zone-button {
				padding: 12rpx 16rpx;
				box-sizing: border-box;
				line-height: 1;
				background: $base-color;
				border-radius: 4rpx;
				font-size: 24rpx;
				color: #FFFFFF;
			}

			.zone-text {
				padding-top: 20rpx;
				font-size: 22rpx;
				color: #666666;
				line-height: 1;
				margin-bottom: 20rpx;
			}
		}

		.zone-right {
			line-height: 1;
			margin-left: 20rpx;
			height: 400rpx;

			.zone-img {
				width: 335rpx;
				height: 186rpx;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				padding: 10rpx 0 0 10rpx;

				.zone-button {
					padding: 12rpx 16rpx;
					box-sizing: border-box;
					line-height: 1;
					background: $base-color;
					border-radius: 4rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					margin-left: 10rpx;
				}

				.zone-text {
					padding-top: 20rpx;
					font-size: 22rpx;
					color: #666666;
					line-height: 1;
					margin-left: 10rpx;
				}
			}

			.zone-img:last-child {
				margin-top: 20rpx;
			}
		}
	}
</style>